<template>
<el-form :model="form">
  <el-row>
    <el-col :span="8">
      <el-form-item label="不可编辑">
        <el-switch v-model="form.disabled" @change="onChange"></el-switch>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item v-if="!form.disabled" label="数据类型">
        <el-select v-model="form.type" @change="onChange">
          <el-option v-for="(item, index) in editorTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
  </el-row>
  <el-form-item v-if="!form.disabled && ['listEditor', 'multipleListEditor'].includes(form.type)">
    <label class="label">选项</label>
    <draggable
      :list="form.values"
      :animation="340"
      group="selectItem"
      handle=".option-drag"
      @end="onChange"
    >
      <div v-for="(item, index) in form.values" :key="index" class="select-item">
        <div class="select-line-icon option-drag">
          <i class="el-icon-s-operation" />
        </div>
        <el-input
          v-model="form.values[index]"
          placeholder="名称"
          size="small"
          @blur="onChange"
        />
        <div class="close-btn select-line-icon" @click="removeSelectItem(index)">
          <i class="el-icon-remove-outline" />
        </div>
      </div>
    </draggable>
    <div style="margin-left: 20px">
      <el-button
        style="padding-bottom: 0"
        icon="el-icon-circle-plus-outline"
        type="text"
        @click="addSelectItem"
      >
        添加选项
      </el-button>
    </div>
  </el-form-item>
</el-form>
</template>

<script>
import draggable from "vuedraggable";
import { omitBy, isUndefined } from 'lodash';
export default {
  name: 'columnEditorSetting',
  props: {
    data: {
      type: Object
    }
  },
  components: {
    draggable,
  },
  data(){
    return {
      form: {
        type: 'inputEditor',
        values: [],
        disabled: false
      },
      editorTypeList: [
        {label: '文本', value: 'inputEditor'},
        {label: '数字', value: 'numberEditor'},
        {label: '多行文本', value: 'textAreaEditor'},
        {label: '日期', value: 'dateEditor'},
        {label: '单选', value: 'listEditor'},
        {label: '多选', value: 'multipleListEditor'},
      ]
    }
  },
  created() {},
  mounted() {},
  methods: {
    async onChange(){
      await this.$nextTick()
      const payload = omitBy(this.form, (value, key)=>{
        return value === undefined
      });
      console.log('onChange payload', payload)
      this.$emit('change', payload);
    },
    removeSelectItem(index) {
      this.form.values.splice(index, 1);
      this.onChange();
    },
    addSelectItem() {
      let options = this.form.values;
      options.push('');
    },
  },
  watch: {
    data: {
      handler(val){
        // console.log('watch.data', val)
        if(val){
          this.form = {...val}
        }
      },
      immediate: true,
    }
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }
  & .el-input + .el-input {
    margin-left: 4px;
  }
}
.select-item + .select-item {
  margin-top: 4px;
}
.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}
.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
}
.option-drag {
  cursor: move;
}
.label {
    // text-align: right;
    vertical-align: middle;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
}
</style>
